<template>
    <div id="ball">
        <nav>
            <span class="fa fa-angle-left" @touchstart="back"></span>
            <span class="fa fa-ellipsis-h"></span>
        </nav>
        <Swiper auto :list="list" loop></Swiper>
        <div id="box">
        <div id="all">
            <div class="top">
                <span>{{info.name}}</span>
                <div class="jiathis_style">
                    <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt" target="_blank"><img src="http://v3.jiathis.com/code_mini/images/btn/v1/jiathis2.gif" border="0" /></a>
                </div>
            </div>
            <p class="p1">￥{{info.price.toFixed(2)}}</p>
            <div class="middle">
                <p><span class="fa fa-tags">{{info.type}}</span></p>
                <p>库存：{{info.num}}</p>
            </div>
            <div class="bottom">
                <span>快递：0.00</span>
                <span>1天前</span>
                <span class="fa fa-map-marker">{{info.area}}</span>
            </div>
        </div>
        <div id="content">
            <div class="two">
                <span>基本参数</span>
                <span>验</span><span>支持验机</span>
            </div>
            <div class="each">
                <span class="fa fa-check-circle-o"></span><span class="one">白</span>
                <span class="fa fa-check-circle-o"></span><span class="one">32G</span>
                <span class="fa fa-check-circle-o"></span><span class="one">无维修主板</span>
                <span class="fa fa-check-circle-o"></span><span class="one">WIFI/蓝牙正常</span>
                <span class="fa fa-check-circle-o"></span><span class="one">机身为浸液</span>
                <span class="fa fa-check-circle-o"></span><span class="one">无锁机器</span>
                <span class="fa fa-check-circle-o"></span><span class="one">指纹识别正常</span>
                <span class="fa fa-check-circle-o"></span><span class="one">未更换屏幕</span>
                <span class="fa fa-exclamation-circle"></span><span class="do">屏幕异常</span>
            </div>
            <div class="intrdouce">
                <p>商品描述</p>
                <span>未来人类（Terrans Force）T7 1060 77SH3 17.3英寸游戏本(i7-7700HQ 16G 256G固态+1T GTX1060 6G独显 )</span>
            </div>
        </div>
        <div id="danbao">
            <span>保</span>
            <span>请勿使用猎趣担保交易之外的交易方式</span>
            <span class="fa fa-ellipsis-h"></span>
        </div>
        <div id="bar">
            <div class="s1">
                <span class="fa fa-commenting-o"></span>
                <p>联系卖家</p>
            </div>
            <div class="s1">
                <span class="fa fa-gavel"></span>
                <p>侃价</p>
            </div>
            <div class="s1">
                <router-link to="/second/ShoppingCar">
                    <span class="fa fa-shopping-cart"></span>
                    <p>购物车</p>
                </router-link>
            </div>
            <div class="s2" @touchstart="btn">加入购物车</div>
            <div class="s3">立即购买</div>
        </div>
        <div v-show="show" id="tab">
            <span>数量</span>
            <button @touchstart="dec">-</button>
            <span v-model="num">{{num}}</span>
            <button @touchstart="add">+</button>
            <div>
                <button class="cancle" @touchstart="cancle">取消</button>
                <br>
                <button class="sure" @touchstart="sure">确定</button>
            </div>
        </div>
        </div>
    </div>
</template>

<script type="text/javascript" src="http://v3.jiathis.com/code_mini/jia.js" charset="utf-8"></script>
<script>
import {Swiper} from 'vux';
import {mapState,mapGetters} from 'vuex'
export default{
    data:function(){
        return{
            str:"",
            list:[],
            info:[],
            show:false,
            num:1
        }
    },
    mounted:function(){
        this.str = this.name;
        this.request();
    },
    computed:{
        name:function(){
            return this.$route.params.asd;
        }
    },
    methods:{
        request:function(){
            var params = {
                name:this.name
            }
            this.$store.dispatch("requestList",params)
            .then(res=>{
                this.info = res.data.msg[0];
                var arr = res.data.msg[0].picture;
                for(var i = 0;i<arr.length;i++){
                    var obj = {};
                    obj.img = arr[i];
                    this.list.push(obj);
                }
            })
        },
        back:function(){
            history.back();
        },
        btn:function(){
            this.show = true;
        },
        dec:function(){
            if(this.num==1){
                return;
            }
            if(this.num>1){
                return this.num--;
            }
        },
        add:function(){
            return this.num++;
        },
        cancle:function(){
            this.show =false;
        },
        sure:function(){
            var o = {
                goodInfo:this.info,
                number:this.num
            }
            this.$store.dispatch("requestAdd",o)
            .then(res=>{
                layer.msg(res.data.msg);
                location.href = "#/second/ShoppingCar"
            })
        }
    },
    components:{
        Swiper,
        mapGetters,
        mapState
    }
}
</script>

<style scoped>
    #ball{
        width: 100vw;
        height: 100vh;
        background-color: white;
        overflow: scroll;
    }
    nav{
        padding: 5px 8px;
        font-size: 20px;
        color: white;
        position: absolute;
        z-index: 100;
        display: flex;
    }
    .fa-angle-left{
        display: inline-block;
        padding: 7px 13px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        margin-right: 243px;
    }
    nav span:nth-of-type(2){
        display: inline-block;
        padding: 7px 10px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
    }
    /*#box{
    
    }*/
    #all{
        width: 100%;
        padding: 10px 8px;
        border-bottom: 1px solid #ccc;
    }
    .jiathis_style{
        display: inline-block;
    }
    .top{
        display: flex;
        justify-content: space-between;
    }
    .top span{
        font-family: 黑体;
    }
    .p1{
        color: red;
        margin: 0;
    }
    .middle{
        display: flex;
        justify-content: space-between;
    }
    .middle p{
        color: #888;
        font-size: 13px;
    }
    .bottom{
        display: flex;
        justify-content: space-between;
        color: #888;
        font-size: 13px;
    }
    #content{
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #ccc;
        padding-left: 8px;
        padding-right: 8px;
    }
    .two span:nth-of-type(1){
        font-size: 15px;
        font-family: 黑体;
    }
    .two span:nth-of-type(2){
        font-size: 12px;
        background-color: red;
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
        color: white;
        border: 1px solid red;
    }
    .two span:nth-of-type(3){
        border: 1px solid red;
        font-size: 12px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        color: red;
        padding-left: 3px;
    }
    .each{
        margin-top: 6px;
        padding-bottom: 6px;
        border-bottom: 1px solid #ccc;
    }
    .fa-check-circle-o{
        color: green;
    }
    .one{
        font-size: 13px;
        color: #444;
        margin-right: 13px;
    }
    .fa-exclamation-circle{
        color: orange;
    }
    .do{
        font-size: 13px;
        color: #444;
    }
    .intrdouce{
        border-bottom: 1px solid #ccc;
        padding-bottom: 6px;
    }
    .intrdouce p{
        margin: 0;
        margin-top: 6px;
        margin-bottom: 6px;
        font-size: 14px;
    }
    .intrdouce span{
        font-size: 13px;
        color: #444;
    }
    #danbao{
        padding: 5px 8px;
        border-bottom: 1px solid #ccc;
    }
    #danbao span:nth-of-type(1){
        border: 1px solid red;
        font-size: 11px;
        padding: 1px;
        border-radius: 3px;
        background-color: red;
        color: white;
    }
    #danbao span:nth-of-type(2){
        font-size: 13px;
        margin-right: 40px;
    }
    #danbao span:nth-of-type(3){
        font-size: 18px;
        color: #555;
    }
    #bar{
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 45px;
        position: fixed;
        left: 0;
        bottom: 0;
    }
    .s1{
        width: 13.33%;
        text-align: center;
        border-right: 1px solid #bbb;
    }
    .s1 p{
        margin: 0;
        font-size: 10px;
    }
    .s1 a{
        text-decoration: none;
        color: black;
    }
    .s2{
        width: 30%;
        text-align: center;
        line-height: 45px;
        background-color: orange;
        color: white;
    }
    .s3{
        width: 30%;
        text-align: center;
        line-height: 45px;
        background-color: orangered;
        color: white;
    }
    #tab{
        position: fixed;
        left: 0;
        bottom: 0;
        height: 150px;
        width: 100%;
        background-color: white;
        text-align: center;
        border-top: 1px solid #999;
        padding-top: 10px;
    }
    .cancle{
        width: 100%;
        height: 30px;
        margin-top: 56px;
        background-color: orange;
        border: none;
    }
    .sure{
        width: 100%;
        height: 30px;
        background-color: orangered;
        border: none;
    }
</style>